import React, { useState } from 'react'
import '../../../assets/styles/index.less'
// import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
// import { Menu } from 'antd';
// import { useState } from 'react';
import MineHome from '../center-1/MineHome'
import MineHistory from '../center-2/MineHistory'
import MineSetup from '../center-3/MineSetup'
export default function Header() {
  const [navList, setNavList] = useState([
    { name: '我的收藏', id: 1, status: 'mine_active' },
    { name: '历史记录', id: 2, status: '' },
    { name: '设置', id: 3, status: '' },
  ])
  let [status, setStatus] = useState('我的收藏')
  function changeNav(name) {
    status = name
    setStatus(status)
    // console.log(status);
    navList.forEach(ele => {
      ele.status = ''
    })
    for (const item of navList) {
      if (item.name == name) {
        item.status = 'mine_active'
        break;
      }
    }
    // console.log(navList);
    setNavList([...navList])
  }
  return (
    <div>
      <div className='mine_main'>
        <div className='mine_photo'>
          <img src={`http://jacklv.cn/images/1679366693038.jpg`} alt="" />
          <p>小小蜗牛</p>
        </div>
      </div>
      <div className='mine_box'>
        <div className='mine_nav'>
          {navList.map(item => {
            return <div onClick={() => changeNav(item.name)} key={item.id} className={'mine_navItem' + ' ' + item.status}>{item.name}</div>
          })}
        </div>
      </div>
      {status=='我的收藏' &&<MineHome/>}
      {status=='历史记录' &&<MineHistory/>}
      {status=='设置' &&<MineSetup/>}
    </div>
  )
}
